<template>
  <div class="vue-container">
    <el-dialog
      ref="maxDialog"
      v-drag
      :title="ruleForm.id ? '编辑菜单' : '新增菜单'"
      :visible.sync="dialogVisible"
      width="800px"
      @closed="closedDialog"
    >
      <el-form
        ref="reform"
        v-loading="loading"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="90px"
        :size="size"
        :show-message="showMessage"
        class="demo-ruleForm"
      >
        <el-row :gutter="24">
          <el-col v-if="ruleForm.parentId !== '0'" :span="24">
            <el-form-item label="父级菜单" prop="parentId">
              <el-cascader
                ref="cascaderTree"
                v-model="ruleForm.parentId"
                style="width: 100%;"
                placeholder="输入菜单名称搜索"
                :options="treeMenuList"
                :props="treeProps"
                filterable
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="ruleForm.type" @input="menuTypeCheck">
                <el-radio
                  v-for="(item, index) in obj.typeList"
                  :key="index"
                  :disabled="ruleForm.parentId === '0'"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="sort">
              <el-input-number
                v-model.trim="ruleForm.sort"
                style="width: 100%"
                :min="0"
                :max="1000000"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type !== 3" :span="12">
            <el-form-item label="菜单图标" prop="icon">
              <icon-menu ref="iconMenu" :logo-value.sync="ruleForm.icon" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="label">
              <el-input v-model.trim="ruleForm.label" placeholder="请输入菜单名称" type="text" :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2" :offset="0" :span="12">
            <el-form-item label="是否外链" prop="isLink">
              <el-radio-group v-model="ruleForm.isLink">
                <el-radio
                  v-for="(item, index) in isLinkList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.isLink === 2" :offset="0" :span="12">
            <el-form-item label="是否缓存" prop="cache">
              <el-radio-group v-model="ruleForm.cache">
                <el-radio
                  v-for="(item, index) in cacheList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.cache === 1" :span="12">
            <el-form-item label="路由名称" prop="name">
              <el-input
                v-model.trim="ruleForm.name"
                :maxlength="50"
                placeholder="请输入路由名称"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.cache === 2" :span="12">
            <el-form-item label="路由名称">
              <el-input
                v-model.trim="ruleForm.name"
                :maxlength="50"
                placeholder="请输入路由名称"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type !== 3" :span="12">
            <el-form-item label="路由地址" prop="path">
              <el-input
                v-model.trim="ruleForm.path"
                :maxlength="50"
                placeholder="请输入路由地址"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.isLink === 2" :span="12">
            <el-form-item label="组件路径" prop="component">
              <el-input
                v-model.trim="ruleForm.component"
                :maxlength="50"
                placeholder="请输入组件路径"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type !== 1 && ruleForm.isLink !== 1" :span="12">
            <el-form-item label="权限字符" prop="permission">
              <el-input
                v-model.trim="ruleForm.permission"
                :maxlength="100"
                placeholder="请输入权限字符"
                type="text"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col v-if="ruleForm.type !== 3" :span="12">
            <el-form-item label="显示状态" prop="showStatus">
              <el-radio-group v-model="ruleForm.showStatus">
                <el-radio
                  v-for="(item, index) in obj.showStatusList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type !== 3" :offset="0" :span="12">
            <el-form-item label="菜单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio
                  v-for="(item, index) in obj.statusList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.isLink === 2" :offset="0" :span="12">
            <el-form-item label="是否固钉" prop="affix">
              <el-radio-group v-model="ruleForm.affix">
                <el-radio
                  v-for="(item, index) in affixList"
                  :key="index"
                  :label="Number(item.code)"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="ruleForm.type === 2 && ruleForm.showStatus === 2" :span="12">
            <el-form-item label="高亮路由" prop="activeMenu">
              <el-input
                v-model.trim="ruleForm.activeMenu"
                :maxlength="50"
                placeholder="请输入高亮路由路径"
                type="text"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model.trim="ruleForm.remarks"
                :rows="2"
                type="textarea"
                show-word-limit
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">取消</el-button>
        <el-button v-throttle :size="size" :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin/save'
import IconMenu from '@/components/IconSelect'
import { validPath } from '@/utils/validate'
export default {
  name: 'MenuSave',
  components: { IconMenu },
  mixins: [mixin],
  data() {
    const validatePath = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入路由地址'))
      } else if (this.ruleForm.isLink === 1 && !validPath(value)) {
        callback(new Error('路由地址格式不正确'))
      } else {
        callback()
      }
    }
    return {
      // 表单对象
      ruleForm: {
        type: 1,
        showStatus: 1,
        status: 1,
        affix: 2,
        cache: 2,
        isLink: 2,
        sort: 0
      },
      treeProps: { // 菜单树配置
        emitPath: false,
        checkStrictly: true,
        value: 'id',
        label: 'label'
      },
      id: '', //  当前编辑菜单ID
      // 父级树形菜单列表
      treeMenuList: [],
      // 包含菜单和目录的菜单列表
      treeMenuAndDirList: [],
      // 仅包含目录的菜单列表
      treeDirList: [],
      affixList: [], // 是否固钉 #1：固定， 2：不固定数组
      cacheList: [], // 是否缓存 #1：缓存， 2：不缓存数组
      isLinkList: [], // 是否外链	# 1：是，2：否数组
      // 表单校验
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ],
        label: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入路由名称', trigger: 'blur' }
        ],
        path: [
          { required: true, validator: validatePath, trigger: 'blur' }
        ],
        component: [
          { required: true, message: '请输入组件路径', trigger: 'blur' }
        ],
        permission: [
          { required: true, message: '请输入权限字符', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    this.affixList = await this.getDictInfo('menu_affix')
    this.cacheList = await this.getDictInfo('menu_cache')
    this.isLinkList = await this.getDictInfo('menu_is_link')
  },
  methods: {
    // 弹出窗口加载
    openDialog(rows) {
      this.dialogVisible = true
      if (rows) {
        this.id = rows.id
        this.ruleForm = { ...this.ruleForm, ...rows }
      }
      this.loading = true
      this.funs['tree']({ parentId: '0', status: 1 }).then(res => {
        // 不要改变这两行的顺序 这里会对res.data进行处理
        this.treeMenuAndDirList = this.eachItem(JSON.parse(JSON.stringify(res.data)), false)
        this.treeDirList = this.eachItem(res.data, true)
        if (rows && rows.type === 3) {
          this.treeProps.checkStrictly = false
          this.treeMenuList = this.treeMenuAndDirList
        } else {
          this.treeProps.checkStrictly = true
          this.treeMenuList = this.treeDirList
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // 递归处理子节点
    eachItem(tree, filterMenu) {
      if (!tree) {
        return []
      }
      if (filterMenu) {
        tree = tree.filter(item => item.type === 1)
      } else {
        tree = tree.filter(item => item.type !== 3)
      }
      tree.forEach(item => {
        item.children = this.eachItem(item.children, filterMenu)
        if (item.id === this.id) {
          item.disabled = true
        }
        if (!item.children.length) {
          delete item.children
          // 此处逻辑代表接口的父级只能是菜单
          // if (item.type !== 2 && !filterMenu) {
          //   item.disabled = true
          // }
        }
      })
      return tree
    },
    // 切换菜单类型
    menuTypeCheck(value) {
      this.ruleForm.parentId = ''
      if (this.$refs.cascaderTree) {
        this.$refs.cascaderTree.$refs.panel.clearCheckedNodes()
      }
      if (value === 3) {
        this.treeProps.checkStrictly = false
        this.treeMenuList = this.treeMenuAndDirList
      } else {
        this.treeProps.checkStrictly = true
        this.treeMenuList = this.treeDirList
      }
    },
    // 弹窗关闭动画结束触发
    closedDialog() {
      // 表单校验重置
      this.ruleForm = {
        type: 1,
        showStatus: 1,
        status: 1,
        affix: 2,
        cache: 2,
        isLink: 2,
        sort: 0
      }
      if (this.$refs.reform) this.$refs.reform.resetFields()
    }
  }
}
</script>
<style scoped>
::v-deep .el-dialog {
  margin-top: 10vh!important;
}
::v-deep .el-dialog .el-dialog__body {
  max-height: 65vh;
}
</style>
